view.personal-data {
    min-height: 100vh;
    background-color: #eceff6;
    overflow: hidden;
    view.personal-info {
        margin-top: 30rpx;
      view.info-item {
          height: 112rpx;
          background-color: #fff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1rpx solid #f3f3f3;
          padding-left:30rpx;
          padding-right:10rpx;
          font-size: 28rpx;
        view.item-left {
            color: #989898;
  
        }
  
        view.item-right {
            color: #333333;
            display: flex;
            align-items: center;
            .head{
                width: 84rpx;
                height: 84rpx;
                display: inline-block;
                margin-right: 10rpx;
                border-radius: 50%;
                overflow: hidden;
                image{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .item-right-text {
                margin-right: 10rpx;
            }
            .item-right-text-marginr20{
                margin-right: 20rpx;
            }
            .iconfont{
                color: #9a9a9a;
                font-size: 34rpx;
            }
        }
      }
      .margintop20{
          margin-top: 20rpx;
      }
    }
    // 弹框
    .popout-container{
        view.mask {
          position: fixed;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, .5);
          width: 100%;
          height: 100vh;
          z-index: 99;
  
        }
        //姓名
        view.name-popout {
          z-index: 100;
          position: absolute;
          top: 300rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 540rpx;
          height: 490rpx;
          background-color: #fff;
          border-radius: 10rpx;
          view.name-popout-title {
            margin-top: 50rpx;
            text-align: center;
            font-size: 34rpx;
          }
        
          view.name-popout-content {
            margin-top: 70rpx;
            view.content-input {
              text-align: center;
              position: relative;
              height: 68rpx;
              input {
                font-size: 30rpx;
              }
              &::after{
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                content: "";
                display: block;
                height: 1rpx;
                background-color: #e6e6e6;
                width: 330rpx;
              }
            }
        
            view.content-info {
              margin-top: 24rpx;
              text-align: center;
              font-size: 20rpx;
              color: #a7a7a5;
            }
          }
        
          view.name-popout-btn {
            // margin: 50rpx auto 0;
            position: absolute;
            bottom: 54rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 274rpx;
            line-height: 80rpx;
            color: #fff;
            text-align: center;
            font-size: 32rpx;
            background-color: #8279ea;
            border-radius: 40rpx;
          }
        }
        // 手机号
        view.phone-popout {
          z-index: 100;
          position: absolute;
          top: 300rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 540rpx;
          height: 490rpx;
          background-color: #fff;
          border-radius: 10rpx;
          view.phone-popout-title {
            margin-top: 50rpx;
            text-align: center;
            font-size: 34rpx;
          }
        
          view.phone-popout-content {
            margin-top: 100rpx;
            view.content-input {
              text-align: center;
              position: relative;
              height: 68rpx;
              input {
                font-size: 30rpx;
              }
              &::after{
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                content: "";
                display: block;
                height: 1rpx;
                background-color: #e6e6e6;
                width: 330rpx;
              }
            }
        
            view.content-info {
              margin-top: 24rpx;
              text-align: center;
              font-size: 20rpx;
              color: #a7a7a5;
            }
          }
        
          view.phone-popout-btn {
            // margin: 50rpx auto 0;
            position: absolute;
            bottom: 54rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 274rpx;
            line-height: 80rpx;
            color: #fff;
            text-align: center;
            font-size: 32rpx;
            background-color: #8279ea;
            border-radius: 40rpx;
          }
        }
        // 身高
        view.height-popout {
          z-index: 100;
          position: absolute;
          top: 300rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 540rpx;
          height: 490rpx;
          background-color: #fff;
          border-radius: 10rpx;
        view.height-popout-title {
            margin-top: 50rpx;
            text-align: center;
            font-size: 34rpx;
        }
    
        picker-view {
          text-align: center;
          margin: 60rpx auto 0;
          picker-view-column {
            view {
    
            }
          }
        }
    
        view.height-popout-btn {
          position: absolute;
          bottom: 54rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 274rpx;
          line-height: 80rpx;
          color: #fff;
          text-align: center;
          font-size: 32rpx;
          background-color: #8279ea;
          border-radius: 40rpx;
        }
        }
        // 出生年月
        view.birth-popout {
          z-index: 100;
          position: absolute;
          top: 300rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 540rpx;
          height: 490rpx;
          background-color: #fff;
          border-radius: 10rpx;
        view.birth-popout-title {
            margin-top: 50rpx;
            text-align: center;
            font-size: 34rpx;
        }
    
        picker-view {
          text-align: center;
          margin: 60rpx auto 0;
          picker-view-column {
            view {
                line-height: 62rpx;
            }
          }
        }
    
        view.birth-popout-btn {
          position: absolute;
          bottom: 54rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 274rpx;
          line-height: 80rpx;
          color: #fff;
          text-align: center;
          font-size: 32rpx;
          background-color: #8279ea;
          border-radius: 40rpx;
        }
        }
        // 性别
        view.sex-popout {
          z-index: 100;
          position: absolute;
          top: 300rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 540rpx;
          height: 490rpx;
          background-color: #fff;
          border-radius: 10rpx;
          view.sex-popout-title {
            margin-top: 50rpx;
            text-align: center;
            font-size: 34rpx;
          }
        
          view.sex-popout-content {
            margin-top: 80rpx;
            // view.content-input {
            //   text-align: center;
            //   position: relative;
            //   height: 68rpx;
            //   input {
            //     font-size: 30rpx;
            //   }
            //   &::after{
            //     position: absolute;
            //     bottom: 0;
            //     left: 50%;
            //     transform: translateX(-50%);
            //     content: "";
            //     display: block;
            //     height: 1rpx;
            //     background-color: #e6e6e6;
            //     width: 330rpx;
            //   }
            // }
            view.content-sex {
              display: flex;
              justify-content: center;
              view.content-sex-item {
                  width: 90rpx;
                  height: 90rpx;
                  border: 2rpx solid #e9e9e9;
                  border-radius: 50%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  font-size: 24rpx;
                  margin: 0 30rpx;
                  box-sizing: border-box;
              }
              .active-man{
                background-color: #2483fe;
                color: #fff;
                border:none!important;
              }
              .active-girl{
                background-color: #f92149;
                color: #fff;
                border:none!important;
              }
            }
            view.content-info {
              margin-top: 24rpx;
              text-align: center;
              font-size: 20rpx;
              color: #a7a7a5;
            }
          }
        
          view.sex-popout-btn {
            // margin: 50rpx auto 0;
            position: absolute;
            bottom: 54rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 274rpx;
            line-height: 80rpx;
            color: #fff;
            text-align: center;
            font-size: 32rpx;
            background-color: #8279ea;
            border-radius: 40rpx;
          }
        }
    }

  }